<template>
    <div id="app">
        <div class="box" v-drag.y="show"></div>
        <div class="box" v-drag.x="show"></div>
    </div>
</template>

<script>
    export default {
        name: "popAdd",
        data(){
            return{
                show:true
            }
        },
        /*实现拖拽*/
        directives:{
            drag(el,{value,modifiers}){
                //el代表使用该指令的元素
                el.onmousedown = function(e){
                    if(e.target.className!="calculator"){
                        return
                    }
                    var disx = e.offsetX ;
                    var disy = e.offsetY;
                    //阻止浏览器的默认事件
                    e.preventDefault();
                    document.onmousemove = function(e){
                        var x = e.clientX - disx;
                        var y = e.clientY - disy;
                        //如果表达式的结果是false,就不拖拽
                        if(!value){
                            return;
                        }
                        //修饰符
                        if(modifiers.x){
                            el.style.left = x + "px";
                        }
                        //修饰符
                        if(modifiers.y){
                            el.style.top = y + "px";
                        }
                        if(!(modifiers.x && !modifiers.y) && value){
                            el.style.left = x + "px";
                            el.style.top = y + "px";
                        }
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }
            }

        }
    }
</script>

<style scoped>
    .box{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
</style>